<script setup lang="ts">
import Password from "@/components/Form/passWord.vue";
import VerificationCode from "@/components/Form/verificationCode.vue";
import Agreement from "@/components/Form/agreement.vue";
import { ref } from "vue";
const userName = ref("");
// 验证码倒计时
let times = ref(60);
// 获取绑定的ref
const verCodeRef = ref();
const passwordRef = ref();
//
const isdisabled = ref(true);
// const
const Login = () => {
  if (userName.value == "") {
    alert("请输入用户名");
    return false;
  }
  if (passwordRef.value.password == "") {
    alert("请输入密码");
    return false;
  }
  if (verCodeRef.value.sms == "") {
    alert("请输入验证码");
    return false;
  }
  alert("登录成功");
};

// 发送验证码
function getCodeValues(code: boolean): void {
  console.log(code);
  if (code == true) {
    alert("开始发送验证码");
    // 验证码为765653
  }
}
// 同意协议书
function getCheckValues(check: boolean): void {
  isdisabled.value = !isdisabled.value;
}
function lookAgreement() {
  console.log(123);
}
</script>
<template>
  <div class="padding_15">
    <div class="public_form_box">
      <van-field
        v-model="userName"
        label="用户名"
        class="public_bottom_line"
        input-align="right"
        placeholder="请输入用户名"
      />
      <Password ref="passwordRef"></Password>
      <VerificationCode
        :times="times"
        ref="verCodeRef"
        @getCodeValues="getCodeValues"
      ></VerificationCode>
      <Agreement :isdisabled="isdisabled" @getCheckValues="getCheckValues"
        ><span  @click.stop="lookAgreement"
          >《协议名称》</span
        ></Agreement
      >
      <div class="login-box">
        <button
          class="btn-blue"
          :disabled="isdisabled"
          @click="Login"
          :class="isdisabled == true ? 'dis-btn' : ''"
        >
          登录
        </button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
::v-deep .van-field__label {
  width: auto;
  label {
    color: #666666;
  }
}
.login-box {
  padding: 0px 20px 20px 20px;
  .btn-blue {
    width: 100%;
    height: 46px;
    background-color: #1677ff;
    color: #fff;
    border: 1px solid #1677ff;
    border-radius: 4px;
  }
  .dis-btn {
    background-color: #a2c9ff;
    border: 1px solid #a2c9ff;
  }
}
</style>
